<template>
    <div class="role-page">
        <div class="type-top-box">
            <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="角色名称：">
                    <el-input v-model="formInline.username" placeholder="请输入关键字搜索"></el-input>
                </el-form-item>
                <el-form-item label="角色类型：">
                    <el-select v-model="formInline.authorityId" clearable placeholder="请选择类型">
                        <el-option v-for="(item,index) in authorityList" :key="index"
                            :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="initData()">查询</el-button>
                </el-form-item>
                <div class="right-outlogin">
                    <span class="add-user" @click="looktypeUser()"><i class="el-icon-circle-plus"></i>编辑角色菜单</span>
                    <span class="add-user" @click="addUser"><i class="el-icon-circle-plus"></i>新增人员角色</span>
                </div>
            </el-form>
        </div>
        <div class="basic-box">
            <ul class="basic-list">
                <li class="basic-item" v-for="(item,index) in dataList" :key="'basic'+index">
                    <div class="item-left">
                        <span>姓名：{{item.userNm}}</span> 
                        <span class="type-text">角色类型：{{typerender(item.authorityId)}}</span>
                        <p class="deptnum">{{item.deptNm}}</p>
                    </div>
                    <div class="item-right">
                        <span @click="deleteThis(item)">删除</span>
                    </div>
                </li>
            </ul>
        </div>
        <add-role ref="addrole" :authorityList="authorityList" @updataList="initData"></add-role>
        <role-type ref="roletype" :authorityList="authorityList"></role-type>
    </div>
</template>
<script>
import Vue from "vue";
import addrole from "./components/addrole";
import roleType from "./components/roleType";
import { Form, FormItem } from "element-ui";
import { alertMessage } from "@/config/myUtil";
import { getroleListApi ,getauthorityData ,getauthorityResourceData ,deleteuserAuthorityeData } from "@/api/getData";
Vue.use(Form);
Vue.use(FormItem);
export default {
    name:"rolePage",
    components:{
        "add-role":addrole,
        "role-type":roleType
    },
    data(){
        return {
            formInline:{
                username:"",
                authorityId:""
            },
            dataList:[],
            authorityList:[],
            typerender:function(type){
                var name = '';
                switch (type) {
                    case "ROLE_SUPERADMIN":
                        name = "超级管理员";
                        break;
                    case "ROLE_ADMIN":
                        name = "普通管理员";
                        break;
                    case "ROLE_DEPT_ADMIN":
                        name = "部门管理员";
                        break;
                    default:
                        break;
                };
                return name;
            }
        }
    },
    mounted(){
        this.getAlsit();
        this.initData();
    },
    methods:{
        async getAlsit(){
            try {
                let list = await getauthorityData();
                this.authorityList = list;
            } catch (error) {
                console.log(error)
            }
        },
        async initData(){
            try {
                let data = await getroleListApi(this.formInline);
                this.dataList = data;
            } catch (error) {
                console.log(error)
            }
        },
        async deleteOneData(item){
            try {
                let data = await deleteuserAuthorityeData({
                    id:{
                        username:item.ad,
                        roleId:item.authorityId
                    },
                    role:null
                });
                if(data == 1){
                    this.initData();
                    alertMessage("删除成功");
                }
            } catch (error) {
                console.log(error);
            }
        },
        addUser(){
            this.$refs.addrole.changeStatus()
        },
        looktypeUser(){
            this.$refs.roletype.changeStatus()
        },
        deleteThis(item){
            this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.deleteOneData(item)
            }).catch(() => {});
        },
    }
}
</script>
<style lang="less" scoped>
@import url('./less/otherpage.less');
</style>